<template>
    <div class="reportmian">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="数据筛选" name="1">
                <!--分支提交测试-->
                <!--测试添加注释-->
                <el-form :inline="true" class="divstyle" :model="selectfrom">
                    <el-form-item label="汽车">
                        <el-select filterable  placeholder="请选择哪辆汽车" v-model="selectfrom.CarId">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllVehicle" :label="v.CareName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.Start"
                                type="date"
                                placeholder="开始时间"
                                value-format="yyyy-MM-dd"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.End"
                                type="date"
                                placeholder="结束时间"
                                value-format="yyyy-MM-dd"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-search" @click="formdata"></el-button>
                        <el-button type="success" icon="el-icon-printer" v-print="printObj">打印</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="数据面板" name="2">
                <el-row>
                    <el-col align="center" style="font-size: 25px;font-weight: bold;">固远晨通科技发展有限公司汽车费用总表</el-col>
                    <el-col>
                        <el-table id="wrapperCarExpenseReport" :data="tableData" :summary-method="getSummaries"  border show-summary>
                            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                            <el-table-column label="车辆品牌" align="center">
                                <template slot-scope="slot">
                                    {{ slot.row.CareName }}
                                </template>
                            </el-table-column>
                            <el-table-column label="汽车牌照" align="center">
                                <template slot-scope="slot">
                                    {{ slot.row.LicensePlate }}
                                </template>
                            </el-table-column>
                            <el-table-column label="车辆型号" align="center">
                                <template slot-scope="slot">
                                    {{ slot.row.CarModel }}
                                </template>
                            </el-table-column>
                            <el-table-column label="保险费" align="center" prop="InsurancePremium"></el-table-column>
                            <el-table-column label="维修、保养费" align="center" prop="MaintenanceFee"></el-table-column>
                            <el-table-column label="过路费" align="center" prop="RoadToll"></el-table-column>
                            <el-table-column label="年检费" align="center" prop="AnnualInspectionFee"></el-table-column>
                            <el-table-column label="油费" align="center" prop="OilFee"></el-table-column>
                            <el-table-column label="总公里数" align="center" prop="TotalKilometres"></el-table-column>
                            <el-table-column label="总计" align="center" prop="sumPicone"></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="数据报表" name="3">
                <div id="EchartData">
                    <div class="pie">
                        <div class="pieData" id="leftData"></div>
                        <div class="pieData" id="rightData"></div>
                    </div>
                    <div class="bar" id="downData"></div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import Echatrs from "echarts";

    export default {
        name: "CarExpenseReport",
        props:{
            AllVehicle:{
                type:Array,
                required:true,
            }
        },
        data(){
            return{
                activeNames: ['1','2','3'],
                selectfrom:{
                    Start:new Date(),
                    End:new Date(),
                    CarId:0,
                },
                tableData:[],
                totalLis:[],
                StartType:[],
                wrapper: {
                    width: "90%",
                    height: "90%",
                    margin: "auto",
                },
                printObj: {
                    id: "wrapperCarExpenseReport",  //打印标签的id
                    popTitle: '固远晨通科技发展有限公司汽车费用总表',  //文件标题
                    extraCss: 'http://www.guyuanct.com/',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                },
            }
        },
        created() {
            this.InitDate();
            this.formdata()
            publicjs.setecharts(Echatrs)
        },
        methods: {
            InitDate() {
                const endDate = this.getFormatDate(new Date()).substr(0, 11)
                const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 30)).substr(0, 11)
                this.selectfrom.Start = beginDate;
                this.selectfrom.End = endDate;
            },
            // 获取当前时间
            getFormatDate(date) {
                var month = date.getMonth() + 1
                var strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
             var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '';
                return currentDate
            },
            // 初始数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Report/GetCarLedgerDB',{
                    Start:this.selectfrom.Start,
                    End:this.selectfrom.End,
                    CarId:this.selectfrom.CarId,
                }).then(res => {
                    loadding.close();
                    this.AllTById(res.data)
                    this.tableData = res.data
                    this.StartTypeInit()
                    this.InitEchart(this.tableData)
                })
            },
            //时间转化
            fmtDateNew(val){
                if (val !='' && val != null){
                    let newtime=val.split(' ')[0]
                    return newtime
                }else{
                    return ''
                }
            },
            //获取对应部门名字
            GetDepartmentName(value){
                let name=''
                if (value!=0){
                    for(let i=0;i<this.AllDepartment.length;i++){
                        if (this.AllDepartment[i].Id == value){
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取对应项目名字
            GetProjectName(value){
                let name=''
                if (value!=0){
                    for(let i=0;i<this.AllProject.length;i++){
                        if (this.AllProject[i].Id == value){
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                }
            },
            //获取人员名称
            GetUserName(value){
                let name=''
                if (value!=0){
                    for(let i=0;i<this.$store.state.AllUsers.length;i++){
                        if (this.$store.state.AllUsers[i].Id == value){
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            AllTById(data){
                for(let j=0; j<data.length; j++){
                    for(let i=0; i<this.AllVehicle.length; i++){
                        if(this.AllVehicle[i].Id == data[j].CarId){
                            let sumPicone=0
                            data[j].CareName = this.AllVehicle[i].CareName
                            data[j].LicensePlate = this.AllVehicle[i].LicensePlate
                            data[j].CarModel = this.AllVehicle[i].CarModel
                            sumPicone = publicjs.dcmAdd(sumPicone,data[j].InsurancePremium)
                            sumPicone = publicjs.dcmAdd(sumPicone,data[j].MaintenanceFee)
                            sumPicone = publicjs.dcmAdd(sumPicone,data[j].RoadToll)
                            sumPicone = publicjs.dcmAdd(sumPicone,data[j].AnnualInspectionFee)
                            sumPicone = publicjs.dcmAdd(sumPicone,data[j].TotalKilometres)
                            sumPicone = publicjs.dcmAdd(sumPicone,data[j].OilFee)
                            data[j].sumPicone = sumPicone
                        }
                    }
                }
            },
            //金额转化
            conversion(val){
                if (val=='' || val == null){
                    return ''
                }else{
                    return val
                }
            },
            // echarts表格加载
            InitEchart(data){
                //按照每辆车的总费用
                let noRepeatDepartData = publicjs.DataGroupBy(JSON.stringify(data), "CareName", "sumPicone");
                let new_DepartName = noRepeatDepartData.map(obj => { return obj.CareName; });
                let new_DepartData = noRepeatDepartData.map(obj => { return { name: obj.CareName, value: obj.sumPicone }; });
                publicjs.InitEchartPie("leftData", "汽车总金额占比", "单位：人民币（元）", new_DepartName, "金额占比", new_DepartData);
                //按照项目分组统计
                let new_ProjectName = this.StartType.map(obj => { return obj.name });
                let new_ProjectData = this.StartType.map(obj => { return { name: obj.name, value: obj.pic }; });
                // console.log(new_ProjectName,new_ProjectData)
                publicjs.InitEchartPie("rightData", "各项费用金额占比", "单位：人民币（元）", new_ProjectName, "费用占比", new_ProjectData);
            },
            //物资来源
            source(val){
                let name=''
                if (val=='' || val==null){
                    name='物资库'
                }else{
                    name = "采购"
                }
                return name
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
							if (!isNaN(value)) {
								let sum =  parseFloat(prev)  + parseFloat(curr)
								return sum.toFixed(2);
							} else {
								return prev.toFixed(2);
							}
                        }, 0);
                        sums[index] += ' 元';
                    }
                });
                this.totalLis=sums
                return sums;
            },
            StartTypeInit(){
                let SumInsurancePremium=0,SumMaintenanceFee=0,SumRoadToll=0,SumAnnualInspectionFee=0,SumOilFee=0
                this.tableData.forEach(x=>{
                    SumInsurancePremium += x.InsurancePremium
                    SumMaintenanceFee += x.MaintenanceFee
                    SumRoadToll += x.RoadToll
                    SumAnnualInspectionFee += x.AnnualInspectionFee
                    SumOilFee += x.OilFee
                })
                this.StartType=[
                    { name:'保险费',pic:SumInsurancePremium },
                    { name:'维修、保养费',pic:SumMaintenanceFee },
                    { name:'过路费',pic:SumRoadToll },
                    { name:'年检费',pic:SumAnnualInspectionFee },
                    { name:'油费',pic:SumOilFee },
                ]
            },
        },
    }
</script>

<style scoped>
    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }
    #EchartData .bar {
        width: 100%;
        height: 500px;
    }
    #EchartData .pie {
        /*height: 500px;*/
    }
</style>
